<template>
  <h2>watch</h2>
  <div class="person">
     <h2>vue3生命周期</h2>
  </div>
</template>

<script lang="ts" setup name="lesson6 vue">
  //需要先引入
  import {ref,onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onUnmounted,onBeforeUnmount} from 'vue'

  //注意，这里和vue2的区别
  console.log("创建")
  onBeforeMount(()=>{
    console.log("挂载前")
  })
  onMounted(()=>{
    console.log("挂载完毕")
  })
  onUpdated(()=>{
    console.log("更新完毕")
  })
  onBeforeUpdate(()=>{
    console.log("更新前")
  })
  onUnmounted(()=>{
    console.log("取消挂载")
  })
  onBeforeUnmount(()=>{
    console.log("取消挂载前")
  })
</script>
<style scoped>
</style>